<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 职工代表大会编辑 -->
    <a-form-model
      ref="ruleForm"
      :model="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      :rules="editModel != 0 ? rules : {}"
    >
      <a-spin :spinning="loading">
        <!-- 表格 -->
        <a-card :bordered="false">
          <title-name title="基本信息"></title-name>
          <custom-form :formList="formList" :form="form" :editModel="editModel == 0 ? 'V' : ''" @getOption="getOption">
            <!-- 人员 -->
            <template #participants>
              <a-tag
                class="mb12"
                v-for="person in form.participants"
                :key="person.id"
                :closable="editModel != 0"
                @close="form.participants = form.participants.filter((item) => person.id !== item.id)"
                color="#108ee9"
                >{{ person.name }}</a-tag
              >
              <a-button v-if="editModel != 0" @click="visible = true" :class="{ ml12: form.participants.length > 0 }"
                >添加人员</a-button
              >
            </template>
            <!-- 附件上传 -->
            <template #fileInfoVOS>
              <template v-if="editModel != 0">
                <l-table businessCode="UNION5" :uploadArrys.sync="form.fileInfoVOS"></l-table>
                <div class="file_prompt">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
              </template>
              <file-link v-else :fileList="form.fileInfoVOS" style="margin-top: -3px"></file-link>
            </template>
          </custom-form>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div class="btn_box page-btn-right-top">
        <a-button :loading="loading" v-if="editModel != 0" type="primary" class="button_right" @click="handleSubmit"
          >提交</a-button
        >
        <a-button type="primary" @click="handleActiveClose">关闭</a-button>
      </div>
    </a-form-model>
    <SelectPersonModal isMutilple :persons="form.participants" :visible.sync="visible" />
  </base-breadcrumb>
</template>

<script>
import { workersRepresentativeMeeting } from '@/api/union/workersCongress' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import Selector from '@/components/Select/Selector'
import SelectPersonModal from '@/components/SelectPersonModal' // 人员
import SelectTreeUnion from '@/components/Select/SelectTreeUnion' // 工会

export default {
    name:'a'+Date.now(),
  extends: new BaseEditPage(),
  components: {
    SelectPersonModal,
  },
  data() {
    return {
      loading: false, // 加载控件
      visible: false,
      editModel: 0, // 操作状态:0 查看;1 编辑;2 新增
      form: {
        participants: [],
      }, // 表单
      rules: {
        meetingName: [{ required: true, whitespace: true, message: '请输入会议名称', trigger: 'change' }],
        // typeId: [{ required: true, message: '请选择层级', trigger: 'change' }],
        unionId: [{ required: true, message: '请选择工会组织', trigger: 'change' }],
        place: [{ required: true, whitespace: true, message: '请输入会议地点', trigger: 'change' }],
        meetingTime: [{ required: true, message: '请选择会议时间', trigger: 'change' }],
        content: [{ required: true, whitespace: true, message: '请输入主要内容', trigger: 'change' }],
        fileInfoVOS: [{ type: 'array', required: true, message: '请上传佐证材料', trigger: 'blur' }],
      }, // 校验规则
      init: false, // 初始化控件
      formCode: '', // 形式选中项code
      subjectCode: '', // 获奖主体选中项code
    }
  },
  watch: {
    // 监听附件实现附件校验
    'form.fileInfoVOS'() {
      if (this.editModel != 0 && this.init) {
        this.$nextTick(() => {
          this.$refs.ruleForm?.validateField('fileInfoVOS')
        })
      }
    },
    // 监听附件实现附件校验
    'form.participants'(e) {
      if (this.editModel != 0 && this.init) {
        this.$nextTick(() => {
          if (this.form.peopleNumber) {
            this.form.peopleNumber = e.length
          } else {
            this.$set(this.form, 'peopleNumber', e.length)
          }
        })
      }
    },
  },
  mounted() {
    this.$route.meta.title = ['职工代表大会查看', '职工代表大会编辑', '职工代表大会新增'][this.editModel]
    // 不为添加时请求详情
    if (this.editModel != 2) {
      this.loading = true
      workersRepresentativeMeeting
        .getDetail({ id: this.id })
        .then((res) => {
          this.loading = false
          this.form = res.data
          // 格式化参会人
          // if (this.editModel != 0) {
          if (res.data.participants) {
            res.data.participants = res.data.participants?.split(',')?.map((item, index) => ({
              id: item,
              name: res.data.participantsName?.split(',')[index],
            }))
          } else {
            res.data.participants = []
          }
          // }
          this.$nextTick(() => {
            this.init = true
          })
        })
        .catch(() => {
          this.loading = false
        })
    } else {
      this.$nextTick(() => {
        this.init = true
      })
    }
  },
  computed: {
    formList() {
      return [
        {
          keyName: 'meetingName',
          type: 'BaseInput',
          label: '会议名称',
        },
        {
          keyName: 'typeId',
          viewName: 'typeName',
          label: '层级',
          disabled: true,
          placeholder: '请先选择工会组织',
          type: Selector,
          attrs: {
            selectType: '1',
            urlType: 'union',
          },
        },
        {
          keyName: 'unionId',
          viewName: 'union',
          label: '工会组织',
          type: SelectTreeUnion,
        },
        {
          keyName: 'place',
          type: 'a-input',
          label: '会议地点',
        },
        {
          keyName: 'peopleNumber',
          type: 'a-input',
          placeholder: '请选择参会人员',
          disabled: true,
          label: '会议人数',
        },
        {
          keyName: 'meetingTime',
          type: 'a-date-picker',
          placeholder: '请选择会议时间',
          label: '会议时间',
          attrs: {
            valueFormat: 'YYYY-MM-DD',
          },
        },
        {
          keyName: 'participants',
          label: '参会人员',
          slot: true,
          span: 24,
        },
        {
          keyName: 'content',
          type: 'BaseTextarea',
          label: '主要内容',
          span: 24,
        },
        {
          slot: true,
          keyName: 'fileInfoVOS',
          label: '佐证材料',
          span: 24,
        },
      ]
    },
  },
  methods: {
    /**
     * 回调工会组织选中项
     */
    getOption() {
      if (arguments[0] === 'unionId') {
        let levelId = arguments[1].unionLevelId // 层级id
        // 映射层级
        if (this.form.typeId) {
          this.form.typeId = levelId
        } else {
          this.$set(this.form, 'typeId', levelId)
        }
        /**
         * 添加表单组织机构参数
         */
        // 公司级
        if (levelId === '605004340528287745') {
          this.form.companyId = arguments[1].id
          // 分公司级
        } else if (levelId === '605004401341501446') {
          this.form.branchComId = arguments[1].id
          this.form.companyId = arguments[1].parentId
          // 项目级
        } else if (levelId === '605004528177254447') {
          this.form.projectId = arguments[1].id
          this.form.branchComId = arguments[1].parentId
        }
      }
    },
    /**
     * 提交表单
     */
    handleSubmit() {
      let that = this
      let api = ['update', 'create'][that.editModel - 1] // 根据操作切换url地址
      // 校验表单
      that.$refs.ruleForm.validate((e) => {
        if (e) {
          // 提交表单
          that.loading = true
          let form = that.$clone(that.form)
          // 格式化文件列表
          if (form.fileInfoVOS.length > 0) {
            form.fileId = form.fileInfoVOS.map((item) => item.commonId).join()
          }
          // 格式化参会人员
          if (form.participants.length > 0) {
            form.participantsName = form.participants.map((item) => item.name).join()
            form.participants = form.participants.map((item) => item.id).join()
          } else {
            delete form.participants
          }
          workersRepresentativeMeeting[api](form)
            .then(() => {
              that.loading = false
              that.$message.success('提交成功！')
              that.$multiTab.close()
            })
            .catch(() => {
              that.loading = false
            })
        } else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.file_prompt {
  color: #999;
}
</style>
